<template>
  <div class="progress-card">
    <el-card shadow="never" class="card-container">
      <!-- 卡片标题 -->
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon class="header-icon"><DataAnalysis /></el-icon>
            <span class="header-title">填写进度</span>
          </div>
          <div class="header-right">
            <el-tag :type="getProgressTagType(overallProgress)" size="small">
              {{ overallProgress }}%
            </el-tag>
          </div>
        </div>
      </template>

      <!-- 整体进度 -->
      <div class="overall-progress">
        <div class="progress-info">
          <span class="progress-label">整体完成度</span>
          <span class="progress-value">{{ overallProgress }}%</span>
        </div>
        
        <el-progress 
          :percentage="overallProgress" 
          :color="getProgressColor(overallProgress)"
          :stroke-width="8"
          :show-text="false"
          class="progress-bar"
        />
        
        <div class="progress-status">
          <span v-if="overallProgress === 100" class="status-complete">
            <el-icon><CircleCheck /></el-icon>
            所有信息已完善
          </span>
          <span v-else-if="overallProgress >= 80" class="status-nearly">
            <el-icon><Warning /></el-icon>
            即将完成，还差一点点
          </span>
          <span v-else-if="overallProgress >= 50" class="status-half">
            <el-icon><Clock /></el-icon>
            已完成一半，继续加油
          </span>
          <span v-else class="status-start">
            <el-icon><Plus /></el-icon>
            刚刚开始，请继续填写
          </span>
        </div>
      </div>

      <!-- 分模块进度 -->
      <div class="sections-progress">
        <div class="sections-title">
          <el-icon><List /></el-icon>
          <span>各模块进度</span>
        </div>
        
        <div class="sections-list">
          <div 
            v-for="section in progressSections" 
            :key="section.key"
            class="section-item"
            :class="{ 'completed': section.completed, 'has-warnings': section.hasWarnings }"
          >
            <div class="section-info">
              <div class="section-header">
                <el-icon 
                  class="section-icon"
                  :class="getSectionIconClass(section)"
                >
                  <component :is="getSectionIcon(section.key)" />
                </el-icon>
                <span class="section-name">{{ section.name }}</span>
                <span class="section-percentage">{{ section.percentage }}%</span>
              </div>
              
              <div class="section-progress">
                <el-progress 
                  :percentage="section.percentage" 
                  :color="getSectionProgressColor(section)"
                  :stroke-width="4"
                  :show-text="false"
                />
              </div>
              
              <div class="section-status">
                <span class="status-text">{{ section.status }}</span>
                <el-icon 
                  v-if="section.hasWarnings"
                  class="warning-icon"
                  color="#FF9500"
                >
                  <Warning />
                </el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下一步建议 -->
      <div class="next-steps" v-if="nextSteps && nextSteps.length > 0">
        <div class="steps-title">
          <el-icon><Star /></el-icon>
          <span>下一步建议</span>
        </div>
        
        <div class="steps-list">
          <div 
            v-for="(step, index) in nextSteps" 
            :key="index"
            class="step-item"
          >
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <span class="step-text">{{ step }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速跳转 -->
      <div class="quick-actions">
        <div class="actions-title">
          <el-icon><Star /></el-icon>
          <span>快速跳转</span>
        </div>
        
        <div class="actions-buttons">
          <el-button 
            v-for="section in incompleteActions" 
            :key="section.key"
            size="small"
            :type="section.completed ? 'success' : 'primary'"
            :icon="section.completed ? 'CircleCheck' : 'Edit'"
            @click="scrollToSection(section.key)"
            class="action-button"
          >
            {{ section.name }}
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { 
  DataAnalysis, CircleCheck, Warning, Clock, Plus, List,
  Star, User, MapLocation, FirstAidKit, House
} from '@element-plus/icons-vue'

const props = defineProps({
  overallProgress: {
    type: Number,
    default: 0
  },
  progressSections: {
    type: Array,
    default: () => []
  },
  nextSteps: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['scroll-to-section'])

// 获取进度标签类型
const getProgressTagType = (progress) => {
  if (progress === 100) return 'success'
  if (progress >= 80) return 'warning'
  if (progress >= 50) return 'primary'
  return 'info'
}

// 获取进度颜色
const getProgressColor = (progress) => {
  if (progress === 100) return '#34C759'
  if (progress >= 80) return '#FF9500'
  if (progress >= 50) return '#007AFF'
  return '#8E8E93'
}

// 获取模块图标
const getSectionIcon = (key) => {
  const iconMap = {
    basicInfo: 'User',
    travelPreferences: 'MapLocation',
    healthInfo: 'FirstAidKit',
    familyInfo: 'House'
  }
  return iconMap[key] || 'User'
}

// 获取模块图标样式类
const getSectionIconClass = (section) => {
  return {
    'completed': section.completed,
    'warning': section.hasWarnings,
    'incomplete': !section.completed && !section.hasWarnings
  }
}

// 获取模块进度颜色
const getSectionProgressColor = (section) => {
  if (section.completed) return '#34C759'
  if (section.hasWarnings) return '#FF9500'
  if (section.percentage >= 50) return '#007AFF'
  return '#8E8E93'
}

// 未完成的模块（用于快速跳转）
const incompleteActions = computed(() => {
  return props.progressSections.filter(section => !section.completed)
})

// 滚动到指定模块
const scrollToSection = (sectionKey) => {
  emit('scroll-to-section', sectionKey)
  
  // 滚动到对应的表单模块
  setTimeout(() => {
    const targetElement = document.querySelector(`[data-section="${sectionKey}"]`)
    if (targetElement) {
      targetElement.scrollIntoView({ 
        behavior: 'smooth', 
        block: 'start' 
      })
    }
  }, 100)
}
</script>

<style lang="scss" scoped>
.progress-card {
  margin-bottom: 16px;
  
  .card-container {
    border: 1px solid #E5E5EA;
    border-radius: 12px;
    overflow: hidden;
    
    :deep(.el-card__header) {
      padding: 16px 20px;
      background: #FAFAFA;
      border-bottom: 1px solid #E5E5EA;
    }
    
    :deep(.el-card__body) {
      padding: 20px;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-left {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .header-icon {
          font-size: 18px;
          color: #007AFF;
        }
        
        .header-title {
          font-size: 16px;
          font-weight: 600;
          color: #3C3C43;
        }
      }
    }
  }
  
  // 整体进度样式
  .overall-progress {
    margin-bottom: 24px;
    
    .progress-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .progress-label {
        font-size: 14px;
        color: #3C3C43;
      }
      
      .progress-value {
        font-size: 18px;
        font-weight: 600;
        color: #007AFF;
      }
    }
    
    .progress-bar {
      margin-bottom: 12px;
    }
    
    .progress-status {
      text-align: center;
      
      span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        
        .el-icon {
          font-size: 14px;
        }
        
        &.status-complete {
          color: #34C759;
          background: #F0FFF0;
        }
        
        &.status-nearly {
          color: #FF9500;
          background: #FFF8F0;
        }
        
        &.status-half {
          color: #007AFF;
          background: #F0F8FF;
        }
        
        &.status-start {
          color: #8E8E93;
          background: #F2F2F7;
        }
      }
    }
  }
  
  // 分模块进度样式
  .sections-progress {
    margin-bottom: 24px;
    
    .sections-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #3C3C43;
      
      .el-icon {
        font-size: 16px;
        color: #007AFF;
      }
    }
    
    .sections-list {
      .section-item {
        margin-bottom: 16px;
        padding: 12px;
        border: 1px solid #E5E5EA;
        border-radius: 8px;
        background: #FAFAFA;
        transition: all 0.3s ease;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &.completed {
          border-color: #34C759;
          background: #F0FFF0;
        }
        
        &.has-warnings {
          border-color: #FF9500;
          background: #FFF8F0;
        }
        
        &:hover {
          background: #F0F0F0;
        }
        
        .section-info {
          .section-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            
            .section-icon {
              font-size: 16px;
              
              &.completed {
                color: #34C759;
              }
              
              &.warning {
                color: #FF9500;
              }
              
              &.incomplete {
                color: #8E8E93;
              }
            }
            
            .section-name {
              flex: 1;
              font-size: 14px;
              font-weight: 500;
              color: #3C3C43;
            }
            
            .section-percentage {
              font-size: 12px;
              font-weight: 600;
              color: #007AFF;
            }
          }
          
          .section-progress {
            margin-bottom: 8px;
          }
          
          .section-status {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .status-text {
              font-size: 12px;
              color: #8E8E93;
            }
            
            .warning-icon {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  
  // 下一步建议样式
  .next-steps {
    margin-bottom: 24px;
    
    .steps-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #3C3C43;
      
      .el-icon {
        font-size: 16px;
        color: #FF9500;
      }
    }
    
    .steps-list {
      .step-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .step-number {
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #007AFF;
          color: white;
          border-radius: 50%;
          font-size: 10px;
          font-weight: 600;
          flex-shrink: 0;
        }
        
        .step-content {
          flex: 1;
          
          .step-text {
            font-size: 13px;
            color: #3C3C43;
            line-height: 1.4;
          }
        }
      }
    }
  }
  
  // 快速跳转样式
  .quick-actions {
    .actions-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #3C3C43;
      
      .el-icon {
        font-size: 16px;
        color: #34C759;
      }
    }
    
    .actions-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .action-button {
        font-size: 12px;
        height: 28px;
        border-radius: 14px;
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .progress-card {
    .card-container {
      :deep(.el-card__body) {
        padding: 16px;
      }
    }
    
    .actions-buttons {
      flex-direction: column;
      
      .action-button {
        width: 100%;
      }
    }
  }
}
</style>